//
// 已读进度
//
<template>
  <div class="main_main">
    <div class="main_main_btn">
      <div class="main_btn_read" :class="{active : itenindex == 1}" @click="btnClick(1)">
        <span>已读</span>
      </div>
      <div class="main_btn_unread" :class="{active : itenindex == 2}" @click="btnClick(2)">
        <span>未读</span>
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="notReadUsersData"
        :height="tableHeight"
        style="width: 100%"
      >
        <el-table-column prop="realName" label="姓名" />
        <el-table-column prop="phonenumber" label="联系方式" />
        <el-table-column prop="deptName" label="所属部门" />
      </el-table>
    </div>
    <div class="main_bottom">
      <div class="readUnread">
        <div class="main_read">
          <span class="main_read_number">{{readUnread[0]}}</span>
        </div>
        /
        <div class="main_unread">
          <span class="main_unread_number">{{readUnread[1]}}</span>
        </div>
      </div>
      <pagination
        :total="total"
        :page.sync="pageData.pageNum"
        :limit.sync="pageData.pageSize"
        :selected-num="selectionsAll.length"
        @pagination="searchByInfo"
      />
    </div>
  </div>
</template>

<script>
import { searchByIds } from '@/api/system/notice'
export default {
  name: 'ReadUnread',
  props: {
    readUserIds: {},
    notReadUserIds: {},
    readStr: {}
  },
  data() {
    return {
      pageId: '已读进度', // 页面唯一标识
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        userIdStr: []
      },
      readUnread:[],
      itenindex: 1,
      currentPage1: 5,
      stripNumber: 0, // 页面条数
      activeName: 'first',
      total: 1, // 数据一共有多少条
      tableHeight: '350', // 表格高度
      selectionsAll: [], // 表格所有页选中的行
      notReadUsersData: []
    }
  },
  mounted() {
    this.btnClick()
    this.readUnread = this.readStr.split(',')
  },
  methods: {
    btnClick(index) {
      console.log(index,1111111111)
      if (!index) {
        index = 1
      }
      this.itenindex = index
      if (this.itenindex == 1) {
        this.pageData.userIdStr = this.readUserIds
        this.searchByInfo()
      } else {
        this.pageData.userIdStr = this.notReadUserIds
        this.searchByInfo()
      }
    },
    searchByInfo() {
      searchByIds({ ...this.pageData }).then(res => {
        this.notReadUsersData = res.data
        this.total = res.total
      })
    }
  }
}
</script>
<style lang="less" scoped>
.readUnread {
  display: flex;
  flex: 1;
  color: rgba(153,153,153,1);
  margin-top: 5px;
  .main_read {
    display: flex;
    font-size: 14px;
    color: rgba(153,153,153,1);
  }
  .main_unread {
    display: flex;
    font-size: 14px;
  }
}
.main_bottom {
  padding-top: 20px;
  display: flex!important;
}
.main_main {
  width: 100%;
  padding: 20px 20px 0 20px ;
  .active {
    height: 100% !important;
    background: rgba(56, 123, 253, 1) !important;
    color: #fff !important;
    border: none !important;
    font-size: 14px !important;
  }
  .table_container {
    padding: 0 !important;
    padding-top: 15px !important;
  }
  .main_main_btn {
    display: flex;
    height: 30px;
    width: 150px;
    .main_btn_read {
      width: 75px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(228, 228, 228, 1);
      border-radius:4px 0px 0px 4px;
      font-size: 14px;
      color: #999999;
      cursor: pointer
    }
    .main_btn_unread {
      width: 75px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(228, 228, 228, 1);
      border-left: none;
      border-radius:0px 4px 4px 0px;
      font-size: 14px;
      cursor: pointer;
      color: #999999;
    }
  }
}
</style>
